  <!-- 环境数据监测 -->
<template>
  <div class="main">
    <div class="farm-main">
      <!-- 树 -->
      <div class="tr-sid">
        <div class="sid-head">选择设施</div>
        <div class="sid-tree">
          <treeSide @treeselectvalue="treeselectvalue" :queryType="'1'" />
        </div>
      </div>
      <div class="tab-box">
        <!-- 主体内容 -->
        <div
          class="header"
        >
          <div class="title">环境数据</div>
          <div class="container">
            <div class="el-icon-arrow-left left" @click="leftHandClick"></div>
            <div :class="dataitemList.length > 8 ? 'center centers' : 'center'" ref="item">
              <div
                v-for="(item, index) in dataitemList"
                :key="index"
                :class="item.flag ? 'item item1' : 'item'"
                @click="getDefaultItem(item, index)"
              >
                <div class="item-content">
                  <template>
                    <img class="image" :src="imgList[0].imgUrl" alt="" v-if="item.dataTypeName === '酸碱度'||item.dataTypeName === 'PH值'" />
                    <img class="image" :src="imgList[1].imgUrl" alt="" v-else-if="item.dataTypeName === '空气湿度' || item.dataTypeName === '二氧化碳'" />
                    <img class="image" :src="imgList[2].imgUrl" alt="" v-else-if="item.dataTypeName === '土壤温度' || item.dataTypeName === '空气温度'" />
                    <img class="image" :src="imgList[3].imgUrl" alt="" v-else-if="item.dataTypeName === '光照度'" />
                    <img class="image" :src="imgList[1].imgUrl" alt="" v-else />
                  </template>
                  <div class="img-right">
                    <div class="time" v-if="item.collectDatetime">
                      {{ item.collectDatetime.slice(0, 10) }}
                    </div>
                    <template>
                      <div v-if="item.enumListType" class="unit">
                        {{ item.enumListType.split(';')[item.lastValue1].slice(2)}}
                      </div>
                      <div v-else-if="item.lastValue1 && !item.enumListType" class="unit">
                        {{ item.lastValue1.toFixed(2) }}{{ item.symbol }}
                      </div>
                      <div v-else-if="item.lastValue1 === 0 && !item.enumListType" class="unit">
                        0{{ item.symbol }}
                      </div>
                    </template>
                    <div class="wl-name">
                      {{ item.dataItemName }}
                    </div>
                  </div>
                </div>
                <div class="icon">
                  <img
                    v-if="index === 1 || index === 3"
                    class="img2 animation2"
                    src="@/assets/environment-data/image/up.png"
                    alt=""
                  />
                  <img
                    v-else
                    class="img2 animation2"
                    src="@/assets/environment-data/image/down.png"
                    alt=""
                  />
                </div>
                <div v-show="!item.dataItemId" class="hand">
                  <img
                    :src="require('@/assets/environment-data/image/hand.png')"
                    alt=""
                  />
                </div>
              </div>
            </div>
            <div
              class="right el-icon-arrow-right"
              @click="rightHandClick"
            ></div>
          </div>
        </div>
        <!-- 折线图 -->
        <div
          class="footer"
        >
          <!-- <div class="input" v-show="curveOrLook">
            <el-form :inline="true" :model="formInline">
              <el-form-item
                style="width: 25%; display: inline-flex"
                label="地块名称："
                v-show="curveOrLook"
              >
                <el-select
                  v-model="formInline.facilityNo"
                  clearable
                  filterable
                  :disabled="!curveOrLook"
                  placeholder="请选择地块名称"
                  @change="facilityChange"
                >
                  <el-option
                    v-for="(item, index) in facilityList"
                    :key="index"
                    :label="item.facilityName"
                    :value="item.facilityNo"
                  />
                </el-select>
              </el-form-item>
              <el-form-item
                label="数据名称："
                style="width: 25%; display: inline-flex"
                v-show="curveOrLook"
              >
                <el-select
                  v-model="formInline.dataTypeConfigId"
                  :disabled="!curveOrLook"
                  clearable
                  filterable
                  placeholder="请选择数据项名称"
                >
                  <el-option
                    v-for="(item, index) in itemList"
                    :key="index"
                    :label="item.dataTypeName"
                    :value="item.dataTypeConfigId"
                  />
                </el-select>
              </el-form-item>
              <el-form-item style="width: 40%" v-show="curveOrLook">
                <el-date-picker
                  :disabled="!curveOrLook"
                  v-model="formInline.date"
                  type="datetimerange"
                  :picker-options="pickerOptions"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  align="right"
                />
              </el-form-item>
              <el-form-item style="width: 5%" v-show="curveOrLook">
                <div class="btn">
                  <img
                    v-show="curveOrLook"
                    :src="
                      require('@/assets/environment-data/image/conpare.png')
                    "
                    @click="onCompare"
                  />
                </div>
              </el-form-item>
            </el-form>
          </div> -->
          <div
            class="content"
          >
            <div class="btns">
              <div class="left" @click="curveLook">
                <img v-show="!LookOrCurve" src="@/assets/environment-data/image/curve2.png" @click="curveLook" alt="">
              </div>
              <div class="right" @click="tableLook">
                <img v-show="LookOrCurve" src="@/assets/environment-data/image/table2.png" @click="tableLook" alt="">
              </div>
            </div>
            <div
              v-show="curveOrLook"
              style="height: 100%;"
              
            >
              <zhechart
                :nowwidth="'100%'"
                :nowheight="'100%'"
                :cdata="zhexiantulistone"
                :y-axis="yaxiosdataList"
              />
            </div>
            <div v-show="!curveOrLook" style="height: 100%">
              <el-table
                :data="tableData"
                :stripe="true"
                border
                height="100%"
                style="width: 100%; height: 100%"
              >
                <el-table-column type="index" label="序号" width="50" />
                <el-table-column
                  prop="dataTypeName"
                  label="物联数据名称"
                  width="180"
                />
                <el-table-column prop="value" label="数据" width="180" />
                <el-table-column prop="collectDatetime" label="采集时间" />
              </el-table>
            </div>
          </div>
          
          <div class="main-center-image">
            <div class="pest-main-bottom">
              <div
                class="pest-bottom-left"
                @click="minpagesize"
              ></div>
              <div class="pest-bottom-center">
                <div
                  v-for="(item, index) in centerimageList"
                  :key="index"
                  class="bottom-center-item"
                  :class="imageselectindex === index ?'bottom-center-item-select':''"
                  @click="setimageindex(item, index)"
                >
                  <div
                    class="testline"
                    @click="showbigimg(item.pictureData)"
                  >查看大图</div>
                  <img
                    class="bottom-center-item-img"
                    :src="item.pictureData"
                  />
                  <!-- <el-image
                    class="bottom-center-item-img"
                    :src="item.pictureData"
                    :preview-src-list="[item.pictureData]">
                  </el-image> -->
                  <div class="bottom-center-item-line">
                    {{ item.collectTime }}
                    <span style="width:10px;"></span>
                    {{ item.collectSettingTime }}
                  </div>
                </div>
              </div>
              <div
                class="pest-bottom-right"
                @click="addpagesize"
              ></div>
            </div>
            <div class="bot-slider">
              <el-slider
                v-model="currentpage"
                :show-tooltip="true"
                :min="1"
                :max="currentpagemax"
                @change="getdatapictureid(false, nowgrowimageindex, CameraList[nowgrowCameraindex])"
              />
            </div>
          </div>
        </div>
      </div>
    </div>
    <el-dialog
      class="zh-new-dialog"
      width="60%"
      :visible.sync="isshowbigimg"
    >
      <!-- <div style="width:950px;margin-left:25px;"> -->
      <img :src="nowselectimgUrl" />
      <!-- </div> -->
    </el-dialog>
  </div>
</template>
<script>
import treeSide from "@/components/selectbutton/trelist.vue";
import zhechart from "@/components/Echarts/components/linechart/chartYaxios.vue";
import userreq from "@/api/user/index";
import nowpagereq from "@/api/digital-production/material-link-monitoring/environmental-data-monitoring/index";
import growthApi from "@/api/digital-production/growth-record-management/seedling-growth-analysis";
import { getHours, getMinutes, getMonth, getDate } from "@/utils/time";
import { mymixin } from "@/utils/mixin";
import nowpagereq1 from "@/api/basic-info-manage/camera-management/index";
export default {
  name: "EnvironmentalDataMonitoring",
  components: { treeSide, zhechart },
  mixins: [mymixin],
  data() {
    return {
      eHeight: "160px",
      imgList: [
        {
          imgUrl: require("@/assets/environment-data/image/ph.png"),
        },
        {
          imgUrl: require("@/assets/environment-data/image/humidness.png"),
        },
        {
          imgUrl: require("@/assets/environment-data/image/temperature.png"),
        },
        {
          imgUrl: require("@/assets/environment-data/image/sun.png"),
        }
      ],
      formInline: {
        dataTypeConfigId: "",
        facilityNo: "",
        date: [],
      },
      itemList: [],
      facilityList: [],
      paramslist: {},
      curveOrLook: true,
      LookOrCurve: true,
      // 表格查看
      tableData: [],
      // 默认名称
      defaultName: "",
      // 对比名称集合
      compareNameList: [],
      // 当前选中的数据项
      nowselectdataitemid: 0,
      // 当前地块数据
      nowbatchlist: [],
      // 弹框相关
      dialogVisible: false,
      searchList: {
        dataItemId: "",
        date: [],
      },
      // 当前地块或地块组下的dataitem,不带环境数据
      echartsidelist: [],
      yaxiosdataList: [
        {
          type: "value",
          axisLabel: {
            fontSize: 10,
          },
          min: 0,
          color: "#fff",
          axisLine: {
            lineStyle: {
              color: "#05EBDB",
            },
          },
        },
      ],
      // echarts数据
      zhexiantulistone: {},
      // ---环境数据相关
      dataitemList: [],
      dataitemLists: [],
      nowclicklist: [],
      nowclickdataindex: "",
      kuangx: 500,
      kuangy: 400,
      // 当前选中地块组名或地亏啊名
      facilityName: "",
      image: {},
      tqsrc: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
      defaultFacilityNO: "",
      // TODO:
      leftOrRightItem: [],
      leftOrRightIndex: 0,
      centerimageList: [],
      imageselectindex: '',
      currentpage: 1,
      currentpagemax: 1,
      nowgrowimageindex: 0,
      CameraList: [],
      nowgrowCameraindex: "",
      isshowbigimg: false,
      nowselectimgUrl: ''
    };
  },
  watch: {
    nowChanceStau(newval) {},
  },
  created() {
    this.getselecltlist();
    this.getNowTime();
  },
  methods: {
    // 展示大图
    showbigimg(e) {
      this.isshowbigimg = true;
      this.nowselectimgUrl = e;
    },
    // 点击树状获取第一条数据
    treeselectvalue(e) {
      this.defaultFacilityNO = e.facilityNo;
      this.paramslist = {};
      if (!e.organizationNo) {
        this.$message.warning("请勿选择此地块组");
        return;
      }
      this.facilityName = e.facilityName;
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
      } else if (e.facilityNo) {
        this.paramslist["facilityNo"] = e.facilityNo;
      }
      this.getPicture();
      this.getTableDataList();
    },
    // 获取数据类型-温度-酸碱度等位置及其图片
    getTableDataList() {
      let e = this.paramslist;
      this.paramslist = {};
      if (e.facilityGroupNo) {
        this.paramslist["facilityGroupNo"] = e.facilityGroupNo;
        nowpagereq.getdataitemlistone(e.facilityGroupNo).then((res) => {
          let data = res.data;
          this.handingdataitem(data);
        });
        return;
      } else if (e.facilityNo) {
        // 走这
        this.paramslist["facilityNo"] = e.facilityNo;
        nowpagereq.getdataitemlisttwo(e.facilityNo).then((res) => {
          let data = res.data;
          this.handingdataitem(data);
        });
      }
    },
    // 整理数据
    async handingdataitem(list) {
      let newlist = [];
      console.log(list,'list');
      list.forEach((itemone, indexone) => {
        // 组织数据
        console.log(itemone, "one");
        let itemonelist = [];
        // if (itemone.dataTypeConfig === undefined) {
          itemone.dataCollectNewVOList.forEach(async (itemtwo) => {
            let nowmessage;
            // 合并
            nowmessage = { ...itemone.dataTypeConfig, ...itemtwo };
            // let imagetwo = "";
            // if (nowmessage.image) {
            //   imagetwo = nowmessage.image;
            // } else {
            //   if (nowmessage.dataTypeId === 14) {
            //     imagetwo = require("@/assets/environment-data/illumination.png");
            //   } else {
            //     imagetwo = require("@/assets/environment-data/humidity.png");
            //   }
            // }
            // itemonelist.push({
            //   ...nowmessage,
            //   image: imagetwo,
            //   xaxis: parseInt(nowmessage.xaxis),
            //   yaxis: parseInt(nowmessage.yaxis),
            // });
            // TODO:
            itemonelist.push({
              ...nowmessage,
              xaxis: parseInt(nowmessage.xaxis),
              yaxis: parseInt(nowmessage.yaxis),
              flag: false
            });
            // itemonelist.push({ flag: false });
          });
          newlist.push(itemonelist);
        // } else {
        //   // 感觉没有-先不管了
        //   itemone.dataCollectNewVOList.forEach(async (itemtwo) => {
        //     let nowmessage;
        //     nowmessage = {
        //       image: require("@/assets/environment-data/humidity.png"),
        //       xaxis: 50,
        //       yaxis: 50,
        //       ...itemtwo,
        //     };

        //     itemonelist.push({
        //       ...itemone.dataCollectNewVOList,
        //     });
        //     console.log(nowmessage);
        //     let imagetwo = "";
        //     if (nowmessage.image) {
        //       imagetwo = nowmessage.image;
        //     } else {
        //       if (nowmessage.dataTypeId === 14) {
        //         imagetwo = require("@/assets/environment-data/illumination.png");
        //       } else {
        //         imagetwo = require("@/assets/environment-data/humidity.png");
        //       }
        //     }
        //     console.log(itemtwo,'two');
        //     itemonelist.push({
        //       ...itemtwo,
        //       image: imagetwo,
        //       xaxis: parseInt(nowmessage.xaxis),
        //       yaxis: parseInt(nowmessage.yaxis),
        //     });
        //     newlist.push(itemonelist);
        //   });
        // }
      });
      let arr = []
      newlist.forEach(el=>{
        el.forEach(ell=>{
          // if(arr.every(it=>it.dataItemName !== ell.dataItemName )){
            arr.push(ell)
          // }
        })
      })
      // console.log(newlist,'new');
      console.log(arr,'arr');
      setTimeout(() => {
        this.dataitemLists = arr
        this.dataitemList = this.dataitemLists.slice(0,8)
        // 选择默认类型
        this.getDefaultItem(arr[0]);
      }, 200);
    },
    // TODO:选择数据类型-默认
    getDefaultItem(item, index = 0) {
      this.leftOrRightItem = item;
      this.leftOrRightIndex = index;
      this.formInline = {
        facilityNo: "",
        dataTypeConfigId: "",
        date: [],
      };
      this.dataitemList.forEach((el) => {
        el.flag = false;
      });
      this.dataitemList[index].flag = true;
      this.defaultName = item.dataTypeName;
      // console.log(this.dataitemList, "ce");
      // 判断一下布尔值--dateIatemid\configId--目前先这样
      if (item.dataItemId) {
        this.getDefaultChartsDate(item);
      } else if (item.dataTypeConfigId) {
        this.getDefaultChartsDate(item, "typeConfig");
      }
    },
    // TODO:
    // 获取默认数据
    async getDefaultChartsDate(item, type = "") {
      // let day = item[0].collectDatetime.slice(5,7)-1
      // 时间-1天
      let day = new Date(item.collectDatetime);
      day.setDate(day.getDate() - 1);
      let params = {};
      if (type === "") {
        params = {
          dataItemId: item.dataItemId,
          endTime: item.collectDatetime, // {date}
          startTime: this.dateToFormat(day),
        };
      } else {
        params = {
          dataTypeConfigId: item.dataTypeConfigId,
          isManualEntry: true,
          endTime: item.collectDatetime,
          startTime: this.dateToFormat(day),
        };
      }
      if (this.formInline.date[0]) {
        params.startTime = this.dateToFormat(this.formInline.date[0]);
        params.endTime = this.dateToFormat(this.formInline.date[1]);
      }
      params["facilityNo"] = this.defaultFacilityNO;
      let res = await nowpagereq.getzhexiandataleft(params);
      this.tableData = res.data;
      this.tableData.forEach((el) => {
        el["dataTypeName"] = this.defaultName;
      });
      let list = res.data;
      let xAxisdata = [];
      let nowindex = 0;
      // console.log(this.dataitemList, id);
      let seriesData = [
        {
          name: this.defaultName,
          type: "line",
          data: [],
          yAxisIndex: nowindex,
          barWidth: 10,
          symbol: "none",
          lineStyle: {
            color: "#0ee8d9",
          },
          itemStyle: {
            color: "#0ee8d9",
          },
        },
      ];
      list.forEach((item) => {
        seriesData[0]["data"].push(item.value);
        let ggdate = this.dateToFormat(item.collectDatetime);
        xAxisdata.push(ggdate);
      });
      this.zhexiantulistone = {
        xAxisdata: xAxisdata,
        xData: ["zh"],
        seriesData: seriesData,
      };
      this.yaxiosdataList = [
        {
          type: "value",
          offset: 0,
          axisLabel: {
            fontSize: 10,
            color: "#fff",
          },
          min: 0,
          axisLine: {
            lineStyle: {
              color: "#05EBDB",
            },
          },
        },
      ];
      // console.log(this.zhexiantulistone, "whw");
    },
    // z2获取折线图
    // endTime: `${date} 23:59:59`,
    // startTime: `${date} 00:00:00`,
    getzhexiandataleft(newList, type = "") {
      let date = this.dateToFormattwo(new Date());
      let typeName = newList[0][0].dataTypeName;
      console.log(newList, "new");
      let params = {};
      if (type === "dataTypeConfigId") {
        params = {
          dataTypeConfigId: newList[0][0].dataTypeConfigId,
          isManualEntry: true,
          endTime: `${date} 23:59:59`,
          startTime: `${date} 00:00:00`,
        };
      } else {
        params = {
          dataItemId: newList[0][0].dataItemId,
          endTime: `${date} 23:59:59`,
          startTime: `${date} 00:00:00`,
        };
      }
      if (this.formInline.date[0]) {
        params.startTime = this.dateToFormat(this.formInline.date[0]);
        params.endTime = this.dateToFormat(this.formInline.date[1]);
      }
      if (this.searchList.date[0]) {
        params.startTime = this.dateToFormat(this.searchList.date[0]);
        params.endTime = this.dateToFormat(this.searchList.date[1]);
      }
      params["facilityNo"] = this.formInline.facilityNo;
      nowpagereq.getzhexiandataleft(params).then((res) => {
        if (!res.data) {
          return;
        }
        if (res.data.length > 0) {
          // console.log(res.data,'折现');
          this.handingzhexiangone(res.data, typeName);
          this.formInline = {};
        } else {
          this.$message.warning("暂无折线图数据");
        }
      });
    },
    // z3折线图数据处理
    handingzhexiangone(list, name) {
      let xAxisdata = [];
      let xData = ["zh"];
      let nowindex = 0;
      if (this.zhexiantulistone.seriesData) {
        nowindex = this.zhexiantulistone.seriesData.length;
        console.log(nowindex);
      }
      let seriesData = [
        {
          name: name,
          type: "line",
          data: [],
          // yAxisIndex: nowindex,// 一条y轴
          barWidth: 10,
          symbol: "none",
          lineStyle: {
            color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
              Math.random() * 255
            )},${Math.round(Math.random() * 255)})`,
          },
          itemStyle: {
            color: `rgb(${Math.round(Math.random() * 255)}, ${Math.round(
              Math.random() * 255
            )},${Math.round(Math.random() * 255)})`,
          }, // 随机色
        },
      ];
      list.forEach((item) => {
        seriesData[0]["data"].push(item.value);
        let ggdate = this.dateToFormat(item.collectDatetime);
        xAxisdata.push(ggdate);
      });
      let oldserData = [];
      if (this.zhexiantulistone.seriesData) {
        oldserData = JSON.parse(
          JSON.stringify(this.zhexiantulistone.seriesData)
        );
      }
      // 新增一条y轴TODO:7/23--先注释
      // let oldyaxioslist = JSON.parse(JSON.stringify(this.yaxiosdataList));
      // let zhoffset = 0;
      // if (oldserData.length >= 2) {
      //   zhoffset = (oldserData.length - 1) * 26;
      // }
      // if (oldserData.length > 0) {
      //   this.yaxiosdataList = [
      //     ...oldyaxioslist
      //     {
      //       type: "value",
      //       offset: zhoffset,
      //       axisLabel: {
      //         fontSize: 10,
      //         color: "#fff"
      //       },
      //       min: 0,
      //       axisLine: {
      //         lineStyle: {
      //           color: "#05EBDB"
      //         }
      //       }
      //     }
      // ];
      // }
      // 新增一条数据
      this.zhexiantulistone = {
        xAxisdata: xAxisdata,
        xData: xData,
        seriesData: [...seriesData, ...oldserData],
      };
      // console.log(this.zhexiantulistone, "zhe");
    },
    // 获取数据项名称
    getdataitemname(id) {
      let name = "数据项名称";
      this.echartsidelist.forEach((item) => {
        if (id === item.dataItemId) {
          name = item.dataItemName;
        }
      });
      return name;
    },
    // 对比
    async onCompare() {
      console.log(this.formInline, "whw");
      if (this.formInline.facilityNo) {
        let res = await nowpagereq.getdataitemlisttwo(
          this.formInline.facilityNo
        );
        // console.log(res,'对比');
        if (res.code === 1) {
          let compareFacilityNo = res.data;
          let newList = [];
          compareFacilityNo.forEach((el) => {
            // console.log(el.dataCollectNewVOList);
            let itemoneList = [];
            el.dataCollectNewVOList.forEach((ell) => {
              let nowmessage = { ...el.dataTypeConfig, ...ell };
              itemoneList.push(nowmessage);
            });
            newList.push(itemoneList);
          });
          newList.forEach((el) => {
            this.compareNameList.push(el[0].dataTypeName);
          });
          newList = newList.filter((el) => {
            return el[0].dataTypeConfigId === this.formInline.dataTypeConfigId;
          });
          if (newList.length > 0) {
            if (newList[0][0].dataItemId) {
              this.getzhexiandataleft(newList);
            } else {
              this.getzhexiandataleft(newList, "dataTypeConfigId");
            }
          } else {
            this.$message.warning("该地块没有该环境数据，请重新选择");
          }
        } else {
          this.$message.warning("该地块没有环境数据，请重新选择");
        }
      } else {
        this.$message.warning("请先选择地块");
      }
    },
    // 获取下拉数据
    async getselecltlist() {
      // 获取物联数据
      let res = await nowpagereq.queryItem();
      if (res.code === 1) {
        this.itemList = res.data;
      }
      let params = {
        organizationList: sessionStorage
          .getItem("organizationList")
          .split(",")
          .concat([sessionStorage.parentId || ""]),
        farmingTypeNo: sessionStorage.getItem("farmingTypeNo"),
        facilityStatus: false,
      };
      // 获取设施
      let result = await userreq.getfacilityAll(params);
      // let result = await nowpagereq1.getshexiangdikaui();
      // console.log(result,'result');
      this.facilityList = result.data;
    },
    getNowTime() {
      this.month = getMonth();
      this.date = getDate() - 1;
      this.hour = getHours();
      this.minute = getMinutes();
    },
    // 曲线查看
    curveLook() {
      this.curveOrLook = true;
      this.LookOrCurve = true
    },
    // 表格查看
    tableLook() {
      this.LookOrCurve = false;
      this.curveOrLook = false
    },
    facilityChange(e) {
      this.formInline = {
        dataTypeConfigId: "",
        date: [],
        facilityNo: e,
      };
      // console.log(e,'whw');
    },
    // TODO:左右按钮
    leftHandClick() {
      if(this.currentPage>0) {
        this.currentPage = this.currentPage - 1
        let num = this.currentPage*8
        this.dataitemList = this.dataitemLists.slice(num,num + 8)
        this.getDefaultItem(this.dataitemList[0]);
      } else {
        this.$message.warning('当前已是第一页')
      }
    },
    rightHandClick() {
      if((this.currentPage + 1) * 8 >= this.dataitemLists.length) {
        this.$message.warning('当前已是最后一页')
      } else {
        this.currentPage = this.currentPage + 1
        let num = this.currentPage*8
        this.dataitemList = this.dataitemLists.slice(num,num + 8)
        this.getDefaultItem(this.dataitemList[0]);
      }
    },
    // 设施图片
    async getPicture () {
      let resp = await growthApi.getdatapictureid({
        page: 1,
        size: 3,
        entity: {
          facilityNo: this.defaultFacilityNO
        }
      })
      if (resp.data.totalPages) {
        this.currentpage = Number(resp.data.totalPages);
        this.currentpagemax = Number(resp.data.totalPages);
      } else {
        this.currentpage = 1
        this.currentpagemax = 1
      }
      this.getdatapictureid()
    },
    getdatapictureid () {
      growthApi.getdatapictureid({
        page: this.currentpage,
        size: 3,
        entity: {
          facilityNo: this.defaultFacilityNO
        }
      }).then(res => {
        let list = res.data.content;
        if (list && list.length > 0) {
          list.forEach(async (item, index) => {
            let resone = await growthApi.getpicmesbypicid(item.pictureNo);
            let restwo = await growthApi.getdataitembycollid(
              item.collectRecordNo
            );
            if (resone.data) {
              let newurl = "data:image/png;base64," + resone.data.pictureData;
              this.$set(list[index], "pictureData", newurl);
              // list[index]["pictureData"] = 'data:image/png;base64,' + resone.data.picture
            } else {
              list[index][
                "pictureData"
              ] = require("@/assets/oth-img/index-bgc.png");
            }
            if (restwo.data && restwo.data.length > 0) {
              list[index]["dataItemList"] = JSON.parse(
                JSON.stringify(restwo.data)
              );
            }
            if (index === 0) {
              this.setimageindex(this.centerimageList[0], 0);
            }
          });
        }
        this.centerimageList = list;
      })
    },
    // 下一页
    addpagesize () {
      this.$message.closeAll()
      this.currentpage = this.currentpage + 1;
      if (this.currentpage > this.currentpagemax) {
        this.$message.warning("已经到最后一页了");
        return;
      }
      this.getdatapictureid();
      this.$message.success("下一页获取成功");
    },
    // 上一页
    minpagesize() {
      this.$message.closeAll()
      this.currentpage = this.currentpage - 1;
      if (this.currentpage < 1) {
        this.currentpage = 1;
        this.$message.warning("页数已为1");
        return;
      }
      this.getdatapictureid();
      this.$message.success("上一页获取成功");
    },
    setimageindex(e, i) {
      this.nowimagemes = e.dataItemList;
      this.imageselectindex = i;
    },
  },
};
</script>

<style lang="scss" scoped>
.main {
  width: 100%;
  height: 100%;
  .farm-main {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    .tr-sid {
      min-width: 200px;
      width: calc(20% - 15px);
      margin-left: 10px;
      margin-right: 5px;
      height: 100%;
      padding: 0 10px 10px;
      background-color: #00485a;
      .sid-head {
        width: 100%;
        height: 40px;
        line-height: 40px;
        font-size: 18px;
        text-align: center;
        border-bottom: #fff dashed 1px;
      }
      .sid-tree {
        width: 100%;
        height: calc(100% - 40px);
      }
    }
    .tab-box {
      width: calc(80% - 20px);
      // TODO:31
      height: 100%;
      border: 1px solid #55a4b8;
      margin-right: 10px;
      margin-left: 20px;
      overflow: hidden;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-around;
      padding: 0 20px 20px;
      .header {
        width: 100%;
        height: 240px;
        .title {
          height: 49px;
          line-height: 49px;
          font-size: 19px;
          font-weight: bold;
          color: #00c69e;
        }
        .container {
          position: relative;
          width: 100%;
          height: calc(100% - 49px);
          padding: 0 52px;
          .left,
          .right {
            width: 32px;
            height: 144px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 53px;
            padding: 0 10px;
            color: #34eee0;
            cursor: pointer;
            background-color: #155f70;
          }
          .left {
            position: absolute;
            left: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .right {
            position: absolute;
            right: 0;
            top: 50%;
            transform: translateY(-50%);
          }
          .center {
            width: 100%;
            height: 100%;
            .item {
              position: relative;
              float: left;
              width: 24%;
              height: 84px;
              margin-right: calc(4% / 3);
              margin-bottom: 14px;
              padding: 10px;
              color: #fff;
              background-color: #065963;
              cursor: pointer;
              &:nth-child(4n) {
                margin-right: 0;
              }
              .item-content {
                display: flex;
                align-items: center;
                justify-content: center;
                // position: relative;
                width: 85%;
                height: 100%;
                border-right: 1px dashed #fff;
                .image {
                  width: 52px;
                  height: 52px;

                  img {
                    width: 100%;
                    height: 100%;
                  }
                }
                .img-right {
                  position: relative;
                  margin-left: 20px;
                  flex: 1;
                  // margin-left: 5px;
                  height: 100%;
                  color: #fff;
                  .time {
                    position: absolute;
                    top: 0;
                    font-size: 14px;
                  }
                  .unit {
                    width: 100%;
                    position: absolute;
                    top: 50%;
                    transform: translateY(-50%);
                    font-size: 28px;
                    font-family: Arial;
                    font-weight: 400;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                  .wl-name {
                    width: 100%;
                    position: absolute;
                    bottom: 0;
                    font-size: 14px;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    white-space: nowrap;
                  }
                }
              }
              .icon {
                width: 15%;
                height: 100%;
                position: absolute;
                right: 0;
                top: 0;
                display: flex;
                justify-content: center;
                align-items: center;
                .img2 {
                  width: 13px;
                  height: 24px;
                }
              }

              .hand {
                position: absolute;
                top: 0px;
                right: 0;
              }
            }
            .item1 {
              background-color: #45b2bd;
            }
          }

          .centers {
            overflow: hidden;
            overflow-y: auto;
          }
        }
      }
      .footer {
        width: 100%;
        height: calc(100% - 240px);
        .input {
          position: relative;
          height: 36px;
          width: 100%;
          display: flex;
          flex-wrap: nowrap;
          .btn {
            position: absolute;
            right: -80px;
            width: 75px;
            height: 36px;
            cursor: pointer;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
        .content {
          position: relative;
          margin-top: 20px;
          width: 100%;
          height: calc(100% - 200px);
          background: linear-gradient(0deg, #003947, #065b65);
          .btns {
            display: flex;
            position: absolute;
            z-index: 999;
            left: 50%;
            transform: translate(-50%, -50%);
            .left,.right {
              width: 93px;
              height: 30px;
              overflow: hidden;
              cursor: pointer;
              img {
                width: 93px;
                height: 30px;
              }
            }
            .left {
              margin-right: 10px;
              background: url('~@/assets/environment-data/image/curve.png') no-repeat 100% 100%;
              &:hover {
                background: url('~@/assets/environment-data/image/curve1.png') no-repeat 100% 100%;
              }
            }
            .right {
              background: url('~@/assets/environment-data/image/table.png') no-repeat 100% 100%;
              &:hover {
                background: url('~@/assets/environment-data/image/table1.png') no-repeat 100% 100%;
              }
            }
            .btn {
              background-color: #106986;
              width: 112px;
              height: 30px;
              text-align: center;
              line-height: 30px;
              border-radius: 5px;
              cursor: pointer;
              &:nth-child(1) {
                margin-right: 12px;
              }
            }
            .btn-curve {
              background-color: #65e8ce;
            }
          }
        }
        .main-center-image {
          width: 100%;
          height: 180px;
          .pest-main-bottom {
            width: 97.5%;
            margin-left: 2%;
            margin-top: 10px;
            height: calc(100% - 30px);
            min-height: 100px;
            overflow: auto;
            display: flex;
            justify-content: space-between;
            align-items: center;

            .pest-bottom-left {
              width: 60px;
              height: 60px;
              margin-left: 10px;
              background-image: url("~@/assets/sxw-pest/left.png");
              background-repeat: no-repeat;
              background-size: 60px;
              cursor: pointer;
            }
            .pest-bottom-center {
              width: calc(100% - 160px);
              height: 150px;
              display: flex;
              justify-content: space-around;
              align-items: center;
              .bottom-center-item {
                box-sizing: border-box;
                width: 25%;
                height: 150px;
                border: teal 1px solid;
                position: relative;
                // display: flex;
                // align-items: center;
                .bottom-center-item-img {
                  width: 100%;
                  height: 140px;
                }
                .testline {
                  display: none;
                  width: 100%;
                  text-align: center;
                  height: 50px;
                  line-height: 50px;
                  position: absolute;
                  top: 45px;
                }
                .testline:hover {
                  color: cyan;
                }
                .bottom-center-item-line {
                  position: relative;
                  bottom: 44px;
                  height: 40px;
                  line-height: 40px;
                  width: 100%;
                  background-color: rgba(72, 88, 99, 0.7);
                  color: cornsilk;
                  text-align: center;
                  font-size: 18px;
                }
              }
              .bottom-center-item-select {
                border: #00c69e 4px solid;
                height: 150px !important;
              }
              .bottom-center-item:hover {
                .testline {
                  display: block;
                }
              }
            }
            .pest-bottom-right {
              width: 60px;
              height: 60px;
              margin-right: 10px;
              background-image: url("~@/assets/sxw-pest/right.png");
              background-repeat: no-repeat;
              background-size: 60px;
              cursor: pointer;
            }
          }
          .bot-slider {
            width: calc(97.5% - 160px);
            margin-left: calc(2% + 85px);
            ::v-deep .el-slider__bar {
              background-color: #00c69e;
            }
          }
        }
      }
      .tab-box-one {
        width: 100%;
        max-width: 1300px;
        height: 600px;
        // height: calc(100% - 180px);
        max-height: 600px;
        background-image: url("~@/assets/oth-img/big-fac.jpg");
        // background-image: url("~@/assets/oth-img/大田种植.png");
        // background-image: url("~@/assets/oth-img/水产养殖.png");
        // background-image: url("~@/assets/oth-img/生态沟渠.png");
        // background-image: url("~@/assets/oth-img/畜牧.png");
        // background-size: 100% 570px;
        background-size: 100% 100%;
        background-repeat: no-repeat;
        background-position: top;
        position: relative;
      }
      .tab-box-two {
        width: 100%;
        // height: calc(100% - 700px);
        height: 110px;
        // border: springgreen 1px solid;
        display: flex;
        align-items: center;
        overflow-x: auto;
        padding: 10px;
      }
    }
  }
}
.vdr.active:before {
  display: none;
}

.mydialog {
  width: 100%;
  height: 500px;
  .zh-search {
    width: 100%;
    height: 50px;
    // background-color: springgreen;
    display: flex;
    .search-item {
      margin-right: 20px;
      color: #000 !important;
      ::v-deep .el-input__inner {
        color: #000 !important;
      }
    }
    .zh-search-but {
      color: #000;
      width: 70px;
      text-align: center;
      height: 30px;
      line-height: 30px;
      margin-left: 10px;
      cursor: pointer;
      border: #000 1px solid;
      border-radius: 10px;
      font-weight: 700;
    }
  }
  .zh-main {
    height: 468px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    .zh-side {
      border: aliceblue 1px solid;
      width: 40px;
      max-height: 468px;
      overflow-y: auto;
      overflow-x: hidden;
      font-size: 20px;
      .zh-side-item {
        width: 40px;
        // height: 100px;
        color: aliceblue;
        font-weight: 500;
        display: flex;
        flex-direction: column;
        background-color: #004860;
        border: aliceblue 1px solid;
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        cursor: pointer;
      }
      .zh-side-item-select {
        width: 40px;
        // height: 100px;
        color: aliceblue;
        font-weight: 600;
        display: flex;
        flex-direction: column;
        background-image: linear-gradient(#0cbac7, #4ceffe, #0bb9c6);
        border: aliceblue 1px solid;
        padding-right: 5px;
        padding-left: 5px;
        padding-top: 10px;
        padding-bottom: 10px;
        text-align: center;
        cursor: pointer;
      }
    }
    .zh-side::-webkit-scrollbar {
      display: none;
    }
    // background-color: steelblue;
    .zh-echart {
      width: calc(100% - 80px);
      height: 350px;
    }
  }
}
.card-style {
  width: 300px;
  height: 80px;
  margin-right: 10px;
}

.mydialog {
  color: #000000;
  .el-input__inner {
    color: #000000;
  }
}
::v-deep.el-date-editor .el-range-input {
  color: #000;
}
::v-deep .el-select .el-input__inner {
  color: #fff !important;
}
::v-deep .el-dialog {
  background-color: #005d7b;
  .el-dialog__title {
    color: #fff;
  }
}
// 动画
.animation {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
.animation2 {
  -webkit-animation: twinkling 1.8s infinite ease-in-out;
  animation: twinkling 1.8s infinite ease-in-out;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}
@keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
@-webkit-keyframes twinkling {
  0% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
  50% {
    opacity: 0.8;
    filter: alpha(opacity=90);
    -webkit-transform: scale(1.12);
  }
  100% {
    opacity: 0.2;
    filter: alpha(opacity=40);
    -webkit-transform: scale(1);
  }
}
::v-deep .el-form .el-form-item__label {
  width: 80px !important;
  min-width: 0 !important;
  padding-right: 0;
}
// 日期颜色
::v-deep .el-range-input {
  color: #fff !important;
}
.zh-new-dialog {
  ::v-deep .el-dialog {
    // width: 1200px !important;
    // height: 800px !important;
    .el-dialog__header {
      background-color: #006e91;
    }
    .el-dialog__title {
      color: #fff;
    }

    border: none !important;
    .el-dialog__body {
      max-height: calc(100% - 120px) !important;
      padding: 30px 20px !important;
      // background-color:  #006e91;
      img {
        width: 100%;
      }
    }
  }
}
</style>
